<template>
  <div class="user-page">
    <!-- 布局 -->
    <el-row :gutter="10">
      <!-- 左侧 -->
      <el-col :span="8">
        <div>
          <div style="display: flex">
            <!-- 搜索表单 -->
            <el-form inline size="small">
              <el-form-item>
                <el-input>
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </el-form>
            <!-- 筛选全部按钮 -->
            <el-button type="primary" style="height: 32px; line-height: 0"
              >全部</el-button
            >
          </div>

          <!-- 树形组件 -->
          <el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
            class="tree"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span class="btn">
                <el-button
                  type="text"
                  size="mini"
                  @click.prevent="() => append(data)"
                  >添加</el-button
                >
                <el-button
                  type="text"
                  size="mini"
                  @click.prevent="() => remove(node, data)"
                  >删除</el-button
                >
              </span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="16">
        <!-- 头部盒子 -->
        <div class="header">
          <!-- <div style="display:inline-block"></div> -->
          <!-- 分类标题 -->
          <div class="title">当前分类：全部</div>
          <div class="form">
            <!-- 搜索表单 -->
            <el-form :inline="true" size="small">
              <el-form-item>
                <el-input>
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </el-form>
            <!-- 新增按钮 -->
            <el-button
              type="primary"
              style="height: 32px; line-height: 0"
              @click="add"
              >新增大类</el-button
            >
            <el-button
              type="primary"
              style="height: 32px; line-height: 0"
              @click="add"
              >新增子类</el-button
            >
          </div>
        </div>
        <!-- table表格 -->
        <div class="table">
          <el-table :data="tableData" border style="width: 100%" height="500">
            <el-table-column prop="Code" label="编码"></el-table-column>
            <el-table-column
              prop="Name"
              label="名称"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="CustomProperty1"
              label="属性1"
            ></el-table-column>
            <el-table-column
              prop="CustomProperty2"
              label="属性2"
            ></el-table-column>
            <el-table-column
              prop="CustomProperty3"
              label="属性3"
            ></el-table-column>
            <el-table-column
              prop="CustomProperty4"
              label="属性4"
            ></el-table-column>
            <el-table-column
              prop="CustomProperty5"
              label="属性5"
            ></el-table-column>

            <el-table-column prop="address" label="操作" width="150">
              <template>
                <el-button size="mini">编辑</el-button>
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @confirm="confirmDel"
                >
                  <el-button
                    style="margin-left: 10px"
                    size="mini"
                    type="danger"
                    slot="reference"
                    >删除</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <!-- 新增对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="showDialog"
      width="40%"
      :before-close="handleClose"
    >
      <el-form label-width="80px" :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="父类名称">
          <el-input v-model="form.PName" readonly disabled></el-input>
        </el-form-item>
        <el-form-item label="分类编码" prop="code">
          <el-input v-model="form.Code"></el-input>
        </el-form-item>
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="form.Name"></el-input>
        </el-form-item>
        <el-form-item label="属性1">
          <el-input v-model="form.CustomProperty1"></el-input>
        </el-form-item>
        <el-form-item label="属性2">
          <el-input v-model="form.CustomProperty2"></el-input>
        </el-form-item>
        <el-form-item label="属性3">
          <el-input v-model="form.CustomProperty3"></el-input>
        </el-form-item>
        <el-form-item label="属性4">
          <el-input v-model="form.CustomProperty4"></el-input>
        </el-form-item>
        <el-form-item label="属性5">
          <el-input v-model="form.CustomProperty5"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.ReMark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getGoodsClassApi, getGoodsClassDataApi } from "@/api/goods";
export default {
  data() {
    return {
      data: [],
      nodes: [],
      defaultProps: {
        label: "name",
        children: "children",
      },
      tableData: [],
      showDialog: false,
      title: "新增物品分类",
      form: {
        PName: "",
        Name: "",
        Code: "",
        CustomProperty1: "",
        CustomProperty2: "",
        CustomProperty3: "",
        CustomProperty4: "",
        CustomProperty5: "",
        ReMark: "",
      },
      rules: {
        code: [{ required: true, message: "请输入分类编码", trigger: "blur" }],
        name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
      },
    };
  },
  created() {
    this.initData();
  },
  methods: {
    add() {
      this.showDialog = true;
    },
    // 确认删除的回调
    confirmDel() {
      this.$message.success("删除成功");
    },
    // 保存提交
    onSubmit() {
      this.$refs.ruleForm.validate((isOk) => {
        console.log(isOk);
      });
    },
    // 取消
    cancel() {
      this.handleClose();
    },
    // Dialog关闭前==> 清除表单验证信息
    handleClose() {
      this.$refs.ruleForm.resetFields();
      this.$refs.ruleForm.clearValidate();

      this.showDialog = false;
    },
    // 添加
    append(data) {
      console.log(data);
      this.form.PName = this.getTextBeforeParentheses(data.name);
      this.showDialog = true;
    },
    // 删除
    remove(node, data) {
      console.log(node);
      console.log(data);
      this.showDialog = true;
    },
    // 初始化数据
    async initData() {
      const res = await getGoodsClassApi();
      // console.log(res);
      this.nodes = res.data;
      this.buildTree(this.nodes);
    },
    async handleNodeClick(data) {
      console.log(data.id);
      const res = await getGoodsClassDataApi(data.id);
      // console.log(res.data);
      this.tableData = res.data;
    },
    // 生成树形数据
    buildTree(nodes) {
      const map = {};

      // 构建节点映射表
      nodes.forEach((node) => {
        map[node.id] = { ...node, children: [] };
      });

      // 构建树形结构
      nodes.forEach((node) => {
        const parent = map[node.pId];
        if (parent) {
          parent.children.push(map[node.id]);
        } else {
          this.data.push(map[node.id]);
        }
      });
      // this.data = tree;
      // console.log(this.data);
      return this.data;
    },
    // 字符串截取括号前的字符
    getTextBeforeParentheses(str) {
      const regex = /(.+?)(?=\s*\()/; // 匹配括号前的文字
      const match = regex.exec(str);

      if (match && match[1]) {
        return match[1].trim();
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.user-page {
  background-color: #fff;
  padding: 70px 30px;

  .tree {
    .btn {
      opacity: 0;
      // margin-left: 100px;

      &:hover {
        opacity: 100;
      }
    }
  }

  .header {
    width: 100%;
    overflow: auto;

    .title {
      float: left;
      font-weight: 700;
    }

    .form {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>